<template>
	<view class="content">
		<!-- 导航 -->
		<view class="formBox status-wrapper boxShadow f-c-sa">
			<view :class="activityStatus == item.value ? 'active' : ''" @click="selectStatus(item.value)"
				v-for="(item, index) in statusList" :key="index">{{ item.name+'(' + item.count + ')' }}</view>
		</view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="formBox basic-info" v-for="(item,index) in list" :key="index">
				<view class="sign">{{ item.activityType|activityType }}</view>
				<view class="f-c-sb">
					<view class="label">状态</view>
					<view class="value">{{ item.activityStatus|prizeStatus}}</view>
				</view>
				<view class="f-c-sb">
					<view class="label">活动编号</view>
					<view class="value">{{ item.orderNo }}</view>
				</view>
				<view class="f-c-sb">
					<view class="label">活动名称</view>
					<view class="value">{{ item.activityName }}</view>
				</view>
				<view class="f-c-sb" v-if="item.activityType == 3 || item.activityType == 4">
					<view class="label">奖品</view>
					<view class="value">{{ item.prize }}</view>
				</view>
				<view class="f-c-sb">
					<view v-if="item.activityType == 1 || item.activityType == 5" class="label f-c-fs">订单金额：
						<view class="value money">￥{{ item.amount }}</view>
					</view>
					<view v-else></view>
					<view class="btn" @click="godetail(item.orderNo,item.activityType)">详情</view>
				</view>
			</view>
		</mescroll-body>

	</view>
</template>

<script>
	import {
		myOrderList,
		myOrderCount
	} from '@/api/marketingB-helper.js';
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				activityStatus: 1,
				statusList: [{
						name: '可使用',
						value: 1,
						count: 0
					},
					{
						name: '已使用',
						value: 2,
						count: 0
					},
					{
						name: '已过期',
						value: 3,
						count: 0
					}
				],
				list: [],
				customerNo: ''
			}
		},
		onLoad(option) {
			this.customerNo = JSON.parse(option.param).customerNo
		},
		methods: {
			//tab改变
			selectStatus(activityStatus) {
				this.activityStatus = activityStatus;
				this.mescroll.triggerDownScroll();
			},
			//获取活动订单数据
			upCallback(page) {
				if (page.num == 1) {
					myOrderCount(this.customerNo).then(res => {
						this.statusList[0].count = res.data[0].noUse;
						this.statusList[1].count = res.data[0].alreadyUse;
						this.statusList[2].count = res.data[0].alreadyOverdue;
					})
				}
				myOrderList({
					activityStatus: this.activityStatus,
					memberNo: this.customerNo,
					pageNo: page.num,
					pageSize: page.size
				}).then(res => {
					//设置列表数据
					if (page.num == 1) this.list = []; //如果是第一页需手动制空列表
					this.list = this.list.concat(res.data); //追加新数据
					this.mescroll.endSuccess(res.data.length);
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},

			//详情
			godetail(orderNo, type) {
				this.$navigateTo('./salesOrder', {
					orderNo : orderNo,
					type : type
				})
			}

		}
	}
</script>

<style lang="less" scoped>
	.content {
		padding: 20rpx 0;
		background: #f5f5f5;

		.basic-info {
			position: relative;
			padding-top: 60rpx;
			border-radius: 18px;
			padding-left: 26rpx;
			padding-right: 26rpx;

			.sign {
				position: absolute;
				left: 0;
				top: 24rpx;
				width: 115rpx;
				height: 40rpx;
				opacity: 1;
				background: #ff9a41;
				border-radius: 0px 20rpx 20rpx 0px;
				font-size: 24rpx;
				text-align: center;
				color: #ffffff;
				line-height: 40rpx;
			}

			.sign-th {
				background: #37ccff;
			}

			.sign-ms {
				background: #ff4166;
			}

			.sign-cj {
				background: #ffce37;

			}

			.value,
			.money-l {
				font-weight: bold;
				font-size: 28rpx;
				flex: 1;
				text-align: right;
				padding-left: 20rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.money {
				color: #FF6738;
				text-align: left;
				padding-left: 0;
				padding-right: 20rpx;
			}

			.label-sign {
				flex: 1;
				font-size: 22rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.money-l {
				color: #FF6738;
				text-align: left;
				padding-left: 0;
				padding-right: 20rpx;
			}

			.area {
				color: #177fff;
				padding-right: 10rpx;
			}

			.btn {
				width: 180rpx;
				height: 66rpx;
				background: #177fff;
				border-radius: 33rpx;
				font-weight: 700;
				text-align: center;
				color: #ffffff;
				font-size: 32rpx;
				line-height: 66rpx;
			}

			.label {
				font-size: 28rpx;
			}

			.f-c-sb {
				padding: 30rpx 0;
				border-bottom: 1px solid #EDEDED;
			}

			.f-c-fs {
				padding-top: 30rpx;
			}

			.f-c-sb:last-child {
				border: none;
				padding-bottom: 15rpx;
			}

			.no-border {
				border: none
			}
		}

		.status-wrapper {
			padding-top: 20rpx;
			font-size: 24rpx;
			width: 657rpx;

			.active {
				color: #177fff;
			}
		}
	}
	
	/deep/ .empty-icon{
		display: inline-table;
	}
</style>
